<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
		<title></title>
		<style type="text/css">
			html,body,div,p{margin: 0px;padding: 0px;}
			body{
				padding-top: 10px;
			}
			.list{
				width: 100%;
				position: relative;
				max-height: 300px;
				overflow: hidden;
				padding: 0px 10px 10px 10px;
				box-sizing: border-box;
			} 
			.list .listImg{width: 65%;float: left;height: 100%;}
			.list .listImg img{width: 100%;}
			
			.list1 .word{
				width: 35%;
				float: left;
				height: 50px;
				/*border: 1px solid gray;*/
				box-sizing: border-box;
				position: absolute;
				right: 0px;
				top: 50%;
				margin-top: -25px;
				text-align: center;
				color: RGB(63,160,195);
			}
			.list1 .word p{
				font-size: 15px;
			}
			.list1 .arrow{
				position: absolute;
				right: 10px;
				top: 50%;
				height: 20px;
				line-height: 20px;
				margin-top: -10px;
				font-size: 50px;
			}
			
			.list2 .word{
				width: 35%;
				float: left;
				height: 60px;
				top: 50%;
				margin-top: -30px;
				position: absolute;
				right: 0px;
				color: RGB(63,160,195);
			}
			
			.list2 .word .title1{
				/*position: absolute;*/
				top: 0px;
				margin: auto;
				width: 65px;
				text-align: center;
				height: 16px;
				margin-top: -10px;
				background: white;
			}
			
			.list2 .word .title2{
				width: 70%;
				margin: auto;
				text-align: center;
				border: 2px solid RGB(63,160,195);
				height: 80%;
				/*line-height: 60px;*/
			}
			
			.list2 .word .title2 .spantitle{
				font-size: 20px;
				display: block;
				margin-top: 5px;
			}
			
		</style>
		<script type="text/javascript">
		</script>
	</head>
	<body>
		<div class="list list1">
			<div class="listImg">
				<img src="images/iverson.jpg"/>
			</div>
			<div class="word">
				<p style="font-size: 22px">我是字体我</p>
				<div style="height: 1px;background: RGB(63,160,195);width: 100px;margin: auto;"></div>
				<p style="font-size: 18px">我是字体</p>
			</div>
			<div class="arrow" style="display: none;">
				<p>></p>
			</div>
		</div>
		
		<div class="list list2">
			<div class="listImg">
				<img src="images/iverson.jpg"/>
			</div>
			<div class="word">
				<div class="title2">
					<div class="title1">我是字体</div>
					<span class="spantitle">我是字</span>
				</div>
			</div>
		</div>
		
	</body>
</html>
